<div class="subtitle"><%= t('devise.registrations.new.subtitle') %></div>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  <div class="marginTop">
    <%= react_component 'Input', props: {
      type: 'text',
      name: 'user[name]',
      id: 'user_name',
      label: t('common.name'),
      autoComplete: 'off',
      light: true,
      required: true
    } %>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'location',
        googleAPIKey: ENV['GOOGLE_API_KEY'],
        id: 'user_location',
        name: 'user[location]',
        label: t('common.form.location'),
        light: true
      } %>
    </div>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'email',
        name: 'user[email]',
        id: 'user_email',
        label: t('common.form.email'),
        light: true,
        required: true
      } %>
    </div>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'password',
        name: 'user[password]',
        id: 'user_password',
        label: t('devise.password'),
        light: true,
        required: true
      } %>
    </div>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'password',
        name: 'user[password_confirmation]',
        id: 'user_password_confirmation',
        label: t('devise.registrations.placeholders.repeat_password'),
        light: true,
        required: true
      } %>
    </div>

    <%= f.submit t('account.sign_up'), class: 'buttonGhostM marginTop' %>
  </div>
<% end %>

<%= render 'devise/shared/links' %>
